<template>
    <div class="biyao-sub-category mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="menu mui-scroll">
            <a v-for="( category, index ) in list" class="item" :class="{ checked: activeCategory == category.id }" @tap="openPage( category.id )">{{ category.name }}</a>
        </div>
    </div>
</template>
<script>
import { ajax, openPage, locationParams } from 'assets/js/Lib';
export default {
    data() {
        return {
            activeCategory: locationParams( 'sub-category' )
        };
    },
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    mounted() {
        mui( '.biyao-sub-category' ).scroll({
          scrollY: false, //是否竖向滚动
          scrollX: true, //是否横向滚动
          startX: 0, //初始化时滚动至x
          startY: 0, //初始化时滚动至y
          indicators: false, //是否显示滚动条
          deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
          bounce: true //是否启用回弹
        });
    },
    methods: {
        openPage: function( subCategoryID ) {
            var categoryID = locationParams( 'category' );
            openPage( `/views/scorelist.html?category=${ categoryID }&sub-category=${ subCategoryID }` );
        }
    }
};
</script>
<style lang="less">
    .biyao-sub-category {
        white-space: nowrap;
        height: 1.1rem !important;
        padding-top: .25rem;
        background: #FAFAFA !important;
        .menu { padding: 0 .4rem; }
        .item {
            position: relative;
            height: .7rem;
            line-height: .7rem;
            font-size: .3rem;
            color: gray;
            display: inline-block;
            padding: 0 .3rem;
            &.checked {
                background: #7f4395;
                border-radius: .35rem;
                color: #fff;
            }
        }
    }
</style>
